Tengo problemas en Next.JS para que un componente acepte una fuente de imagen a través de un accesorio. Estoy pasando la ruta de una imagen llamada "logo.jpg" ubicada en la carpeta pública del proyecto. Cuando se pasa como accesorio para otro componente, acepta la imagen y la usa correctamente. Cuando se usa como accesorio para el componente problemático, no reconoce que la ruta se está leyendo.

¿Cómo puedo resolver este problema para que Next.JS reconozca y use la ruta de una imagen alimentada como accesorio?

Error producido por la consola

 Image is missing required "src" property: <img alt="" src="data:image/gif;base64,R0…AAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;…ht:100%;max-height:100%">

Estructura de archivo (relevante)

 card-page ├───components │ card.js │ cardlink.js ├───pages │ _app.js │ index.js └───public logo.jpg

Componente de trabajo (card.js)

 import React from 'react' import Image from 'next/image' import styles from '../styles/card.module.css' export default function Card( {title, image, alt, description} ) { console.log(image) return( <div className={styles.container}> <Image src={image} width="200" height="200" alt={alt} /> <h1>{title}</h1> <p>{description}</p> </div> ) }

Componente roto (cardlink.js)

 import Image from 'next/image' import Link from 'next/link' import styles from '../styles/cardlink.module.css' export default function CardLink( text, image, href ) { console.log(image) return( <div className={styles.container}> <Image src={image} width={64} height={64} alt="" /> </div> ) }

índice.js

 import Head from 'next/head' import Image from 'next/image' import styles from '../styles/home.module.css' import CardLink from '../components/cardlink' import Card from '../components/card' export default function Home() { return ( <div className={styles.container}> <Card image="/logo.jpg" /> <CardLink image="/logo.jpg" text="Link 1" href="" alt="what" /> </div> ) }